<template>
	<view class="content">
		<div class="topBox">
			<view class="topMess">
				<view class="headPhoto">
					<image class="img" :src="$imgUrl + '/logo.png'" mode=""></image>
				</view>
				<view class="messBox">
					<view class="phone" v-if="isLogin">
						<text v-if="userInfo.name">{{userInfo.name}}</text>
						<text v-else-if="userInfo.nickname">{{userInfo.nickname}}</text>
						<text v-else>{{$filters.hidePhoneNum(userInfo.mobile)}}</text>
					</view>
					<view class="phone" v-else @click="goTo('/pages/login/login')">游客</view>
					<view class="status active" v-if="isLogin">
						<text v-if="userInfo.authenticated">已认证</text>
						<text v-else>未认证</text>
					</view>
					<view class="status" v-else>
						<text>未认证</text>
					</view>
				</view>
<!--				<view class="role" @click="goDetail(10)">我是房东<uni-icons class="ml-4rpx" type="forward" size="12"-->
<!--						color="#fff"></uni-icons></view>-->
			</view>
			<view class="personalBox">
				<view class="personalTop flex">
					<view class="lev flex-1">LV{{userInfo.level||1}}</view>
					<view class="num">当前积分 : <text class="txt">{{userInfo.score || 0}}</text></view>
				</view>
				<view class="personalContent flex">
					<view class="nav flex-1" @click="goTo('/pages/personal/integral/index')">
						<view class="icon icon01"></view>积分明细
					</view>
					<view class="nav flex-1" @click="goIntegra">
						<view class="icon icon02"></view>积分兑换
					</view>
				</view>
				<view class="navBox">
					<view class="nav" v-for="(item,i) in navList" :key="i" @click="goTo(item.url)">
						<view class="pic">
							<image class="img"
								:src="$imgUrl+`/personal/nav0${item.index}.png`"
								mode=""></image>
						</view>
						<view class="title">{{item.title}}</view>
					</view>
				</view>
			</view>
		</div>

		<view class="roomSetNav">
			<view class="setTitle">其他服务</view>
			<view class="setNav row">
				<view class="nav" @click="goTo('/pages/personal/doorLock/doorLockList')">
					<image class="img" :src="$imgUrl + '/personal/ms.png'"></image>
					<view class="title">我的<text class="tit">门锁</text></view>
				</view>
				<view class="nav" @click="goTo('/pages/personal/watermeters/watermetersList')">
					<image class="img" :src="$imgUrl + '/personal/sb.png'"></image>
					<view class="title">我的<text class="tit">水表</text></view>
				</view>
				<view class="nav" @click="goTo('/pages/personal/ammeters/ammetersList')">
					<image class="img" :src="$imgUrl + '/personal/db.png'"></image>
					<view class="title">我的<text class="tit">电表</text></view>
				</view>
				<!-- <view class="nav" @click="goTo('/pages/personal/access/index')"> -->
				<view class="nav" @click="$Foundation.onDev()">
					<image class="img" :src="$imgUrl + '/personal/mj.png'"></image>
					<view class="title">我的<text class="tit">门禁</text></view>
				</view>
			</view>
		</view>
		<view class="navListBox flex">
      <view class="navItem" @click="goDetail(0)">
        <image class="img" :src="$imgUrl + '/personal/quan.png'" mode=""></image>
        <view class="txt">优惠券</view>
      </view>
      <view class="navItem" @click="goDetail(1)">
        <image class="img" :src="$imgUrl + '/personal/fapiao.png'" mode=""></image>
        <view class="txt">我的票据</view>
      </view>
<!--			<view class="navItem" @click="goDetail(2)">-->
<!--				<image class="img" :src="$imgUrl + '/personal/invite.png'" mode=""></image>-->
<!--				<view class="txt">邀请有礼</view>-->
<!--			</view>-->
			<view class="navItem" @click="goDetail(3)">
				<image class="img" :src="$imgUrl + '/personal/kabao.png'" mode=""></image>
				<view class="txt">我的卡包</view>
			</view>
			<view class="navItem" @click="goDetail(4)">
				<image class="img" :src="$imgUrl + '/personal/set.png'" mode=""></image>
				<view class="txt">个人设置</view>
			</view>
			<view class="navItem">
				<navigator url="/pages/personal/aboutUs/index">
				<image class="img" :src="$imgUrl + '/personal/about.png'" mode=""></image>
				<view class="txt">关于我们</view>
				</navigator>
			</view>
			<view class="navItem" @click="goDetail(6)">
				<image class="img" :src="$imgUrl + '/personal/eval.png'" mode=""></image>
				<view class="txt">评价建议</view>
			</view>
			<view class="navItem" @click="goDetail(11)">
				<image class="img" :src="$imgUrl + '/personal/activity-icon.png'" mode=""></image>
				<view class="txt">我的报名</view>
			</view>
			<view class="navItem" @click="goDetail(7)">
				<image class="img" :src="$imgUrl + '/personal/complain.png'" mode=""></image>
				<view class="txt">意见反馈</view>
			</view>
			<view class="navItem" @click="goDetail(8)">
				<image class="img" :src="$imgUrl + '/personal/message.png'" mode=""></image>
				<view class="txt">信息动态</view>
			</view>
			<view class="navItem">
				<navigator url="/pages/personal/faq/index">
				<image class="img" :src="$imgUrl + '/personal/question.png'" mode=""></image>
				<view class="txt">常见问题</view>
				</navigator>
			</view>
<!--			<view class="navItem" @click="goTo('/pages/personal/houseWallet/index')">-->
<!--				<image class="img" :src="$imgUrl + '/personal/houseWallet.png'" mode=""></image>-->
<!--				<view class="txt">房屋钱包</view>-->
<!--			</view>-->
		</view>
		<view class="serviceBox">
			<view class="phone">客服电话：18217098366</view>
		</view>
	</view>
	<uni-popup ref="popupRef" type="dialog" style="z-index: 99999999;">
		<uni-popup-dialog
			v-if="userInfo.authenticated && form.flag == 1 && form.status"
			title="您有待签约合同"
			confirmText="去签约"
			class="check-popup"
			@confirm="goSign(form.contractId, 1)">
		</uni-popup-dialog>
		<uni-popup-dialog
			v-if="userInfo.authenticated && form.flag == 2 && form.status"
			title="你有待支付账单"
			confirmText="去支付"
			class="check-popup"
			@confirm="goTo('/pages/personal/bills/billList?flag=true')">
		</uni-popup-dialog>
		<uni-popup-dialog
			v-if="userInfo.authenticated && form.flag == 3 && form.status"
			title="您有一份安全协议需要签署"
			confirmText="去签署"
			class="check-popup"
			@confirm="goSignature">
		</uni-popup-dialog>
		<uni-popup-dialog
			v-if="userInfo.authenticated && form.flag == 4 && form.status"
			title="您有交房待处理"
			confirmText="去交房"
			class="check-popup"
			@confirm="goTo(`/pages/personal/contract/detail/confirmation?id=${form.contractId}`)">
		</uni-popup-dialog>
		<uni-popup-dialog
			v-if="userInfo.authenticated && form.flag == 5 && form.status"
			title="您有待签约业主合同"
			confirmText="去签约"
			class="check-popup"
			@confirm="goSign(form.contractId, 2)">
		</uni-popup-dialog>
		<uni-popup-dialog
			v-if="!userInfo.authenticated"
			:title="dialogTitle"
			class="check-popup"
			confirmText="去认证"
			@confirm="goConfirm">
		</uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="popupApprove" type="dialog" style="z-index: 99999999;" @maskClick="closePop">
		<uni-popup-dialog
			:content="`“${approveItem.applyMemberName}”发起了${approveItem.roomName}房屋钱包提现${approveItem.amount}元。`"
			class="check-popup approve-popup"
			before-close="true"
			cancelText="拒绝"
			confirmText="同意"
			@close="handleApprove('REFUSE')"
			@confirm="handleApprove('AGREE')">
		</uni-popup-dialog>
	</uni-popup>
</template>

<script lang="ts" setup>
import { getInfo } from '@/common/API/login';
import { checkSafeProtocol,getSignUrl,switchPopup } from '@/common/API/secure';
import { onShow,onPullDownRefresh } from "@dcloudio/uni-app"
import { ref, reactive, nextTick } from 'vue'
import { useStore } from 'vuex'
import config from '@/utils/config'
import { withdrawPage,withdrawReview } from '@/common/API/finance'
import { getEncodeToken } from '@/common/API/member'

const store = useStore()

const isLogin = ref(false)
const userInfo = ref({})
const popupRef = ref(null)
const popupApprove = ref(null)
const dialogTitle = ref("请先进行身份认证")
const navList = ref([{
	index: 1,
	url: '/pages/personal/appointment/appointmentRoomList',
	title: '我的预约'
}, {
	index: 2,
	url: '/pages/personal/contract/contractList?flag=true',
	title: '我的合同'
}, {
	index: 3,
	url: '/pages/personal/bills/billList?flag=true',
	title: '我的账单'
}, {
	index: 4,
	url: '/pages/personal/deposit/depositList?flag=true',
	title: '我的预定'
}])

//弹窗安全协议
const form = reactive({
	flag: 1,
	status: false,
	contractId: null
})
// 待审批
const approveItem = ref({})
onShow(()=>{
	if (uni.getStorageSync('userId')) {
		isLogin.value = true
		getUserInfo();
		nextTick(()=>{
			// checkSafe().then((result)=>{
			// 	if(result){
			// 		popupRef.value.open()
			// 	}
			// })

			// 判断是否有同住人提现
			withdrawPage({
				type: 'REVIEW',
				result: 'PENDING'
			}).then((res)=>{
				let withdrawList = res.list
				let approveArr = withdrawList.filter(item=>item.result=='PENDING')
				if(approveArr.length){
					approveItem.value = approveArr[0]
					popupApprove.value.open()
				}else{
					getPopup()
				}
			})
		})
	}else{
		isLogin.value = false
		// uni.navigateTo({
		// 	url:'/pages/login/login'
		// })
	}
})

onPullDownRefresh(()=>{
	if (uni.getStorageSync('userId')) {
		isLogin.value = true
		getUserInfo();
	}
	setTimeout(()=> {
		uni.stopPullDownRefresh();
	}, 1000);
})

const closePop = ()=>{
	popupApprove.value.close()
}

const getPopup = ()=>{
	// 类型 1待签约合同 2待支付账单 3待签约安全协议 4交房待处理
	switchPopup().then((result)=>{
		if(result.type&&result.signType!=1){
			form.flag = result.type
			form.status = result.status

			if(result.contractId){//签约合同 交房 需要合同id
				form.contractId = result.contractId
			}

			if(!userInfo.authenticated){
				switch(result.type){
					case 1:
						dialogTitle.value = "签约合同，请先进行身份认证"
					break;
					case 2:
						dialogTitle.value = "支付账单，请先进行身份认证"
					break;
					case 3:
						dialogTitle.value = "签订电子入住协议,请先进行身份认证"
					break;
					case 4:
						dialogTitle.value = "处理交房，请先进行身份认证"
					break;
					case 5:
						dialogTitle.value = "签约业主合同，请先进行身份认证"
					break;
				}
			}
			popupRef.value.open()//请先进行身份认证
		}
	})
}

const getUserInfo = async ()=> {
	let res = await getInfo()
	userInfo.value = res
	store.dispatch('setUserInfo', res);
}
const goTo = (url)=> {
	popupRef.value.close()
	if(!isLogin.value){
		uni.navigateTo({
			url:'/pages/login/login'
		})
	}else{
		if(url == '/pages/personal/contract/contractList?flag=true'){
			getUserInfo()
		}
		uni.navigateTo({
			url: url
		})
	}
}
const goDetail = (id)=> {
	if(!isLogin.value){
		uni.navigateTo({
			url:'/pages/login/login'
		})
		return false
	}
	if (id == 0) {
		uni.navigateTo({
			url: '/pages/personal/coupon/couponList'
		})
	} else if (id == 1) {
		uni.navigateTo({
			url: '/pages/personal/invoice/invoiceNav'
		})
	} else if (id == 2) {
		uni.navigateTo({
			url: '/pages/personal/invite/index'
		})
	} else if (id == 3) {
		uni.navigateTo({ //卡包
			url: '/pages/personal/cardbag/index'
		})
	} else if (id == 4) {
		uni.navigateTo({
			url: '/pages/personal/settings/index?flag=true'
		})
	} else if (id == 5) {
		uni.navigateTo({
			url: '/pages/personal/aboutUs/index'
		})
	} else if (id == 6) {
		uni.navigateTo({
			url: '/pages/personal/suggestion/index'
		})
	} else if (id == 7) {
		uni.navigateTo({
			url: '/pages/personal/feedback/add'
		})
	} else if (id == 8) {
		uni.navigateTo({
			url: '/pages/personal/notice/index'
		})
	} else if (id == 9) {
		uni.navigateTo({
			url: '/pages/personal/faq/index'
		})
	} else if (id == 10) {
		uni.navigateTo({
			url: '/pages/personal/landlord/index?flag=true'
		})
	} else if (id == 11) {
		uni.navigateTo({
			url: '/pages/personal/activity/list'
		})
	}
}
//判断是否有安全协议需要签署
const checkSafe = async () => {
	let res = await checkSafeProtocol()
	return res
}
//去签署安全协议
const goSignature = async () => {
	let res = await getSignUrl()
	if(res){
		// #ifdef APP-PLUS
		plus.share.getServices(function (res1) {
			var sweixin = null;
			for (var i = 0; i < res1.length; i++) {
				var t = res1[i];
				if (t.id == 'weixin') {
					sweixin = t;
				}
			}
		let loginInfo = {
			userPhone: uni.getStorageSync('userPhone'),
			accessToken: uni.getStorageSync('accessToken'),
			userId: uni.getStorageSync('userId'),
			tenentId: uni.getStorageSync('tenentId')
		}
		if (sweixin) {
			sweixin.launchMiniProgram({//拉取微信小程序
				id: config.wxChatAppId,
				type: config.type,
				path: `/pages/internal/index?loginInfo=${encodeURIComponent(JSON.stringify(loginInfo))}&url=${encodeURIComponent(`/pages/personal/secure-protocol/index?url=${encodeURIComponent(res)}`)}`
			});
			popupRef.value.close()
			}
		}, function (e) {
			console.log(e);
		});
		//#endif

		// #ifndef APP-PLUS
		popupRef.value.close()
		uni.navigateTo({
			url: `/pages/personal/secure-protocol/index?url=${encodeURIComponent(res)}`
		})
		//#endif
	}
}
//去实名认证
const goConfirm = () => {
	popupRef.value.close()
	uni.navigateTo({
		url: '/pages/personal/settings/autonym'
	})
}

//在线签约
const goSign = (id,type) => {
	let userInfo = uni.getStorageSync('userInfo')
	if(!userInfo.authenticated){
		uni.showToast({
			title: '用户未实名认证',
			icon: 'none',
		});
		return
	}
	let phoneVal = uni.getStorageSync('userPhone')

	// #ifdef APP-PLUS

	plus.share.getServices(function(res){
		var sweixin = null;
		for (var i = 0; i < res.length; i++) {
			var t = res[i];
			if (t.id == 'weixin') {
				sweixin = t;
			}
		}
		console.log(JSON.stringify(sweixin))
		let loginInfo = {
			userPhone: phoneVal,
			accessToken: uni.getStorageSync('accessToken'),
			userId: uni.getStorageSync('userId'),
			tenentId: uni.getStorageSync('tenentId')
		}
		if (sweixin) {
			let url;
			if(type == 1){
				url = `contract/contractSign`
			}else if(type == 2){
				url = `landlord/ownerSign`
			}
			sweixin.launchMiniProgram({
				id: config.wxChatAppId,
				type: config.type,
				path: `/pages/internal/index?loginInfo=${encodeURIComponent(JSON.stringify(loginInfo))}&url=${encodeURIComponent(`/pages/personal/${url}?id=${id}&phone=${phoneVal}`)}`
			});
			popupRef.value.close()
		}
	}, function(e){
	    console.log();
	});
	//#endif

	// #ifndef APP-PLUS
		popupRef.value.close()
		if(type == 1){
			uni.navigateTo({
				url:`/pages/personal/contract/contractSign?id=${id}&phone=${phoneVal}`
			})
		}else if(type == 2){
			uni.navigateTo({
				url:`/pages/personal/landlord/ownerSign?id=${id}&phone=${phoneVal}`
			})
		}
	// #endif
}
// 提现审批
const handleApprove = (type)=>{
	let data = {
		id: approveItem.value.id,
		result: type
	}
	withdrawReview(data).then(result=>{
		uni.showToast({
			title: '操作成功'
		})
		popupApprove.value.close()
	})
}

// 打开积分商城
const goIntegra = ()=>{
	if(!isLogin.value){
		uni.navigateTo({
			url:'/pages/login/login'
		})
		return false
	}
	let accessToken = uni.getStorageSync('accessToken')
	accessToken = accessToken.substr(7, accessToken.length)
	let data = {
		userId: uni.getStorageSync('userId'),
		accessToken: accessToken,
		refreshToken: uni.getStorageSync('refreshToken'),
		tenantId: uni.getStorageSync('tenentId')
	}
	getEncodeToken(data).then(res=>{
		if(res.ciphertext&&res.signString){
			uni.setStorageSync('integralViewData',res)
			uni.navigateTo({
				url: '/pages/personal/integral/integralWebview'
			})
		}else{
			uni.showToast({
				title: '功能开发中...',
				icon: 'none'
			})
		}
	})
}

</script>

<style lang="scss" scoped>
.content {
		background: #fff;
		.topBox {
			padding: var(--status-bar-height) 0 0;
			/* #ifdef MP-WEIXIN */
			padding: calc(var(--status-bar-height) + 36rpx) 0 0;
			/* #endif */
			margin: 0 0 44rpx;
			background: linear-gradient(180deg, rgba(252, 210, 102, 0.35) 0%, rgba(254, 145, 105, 0.35) 39.14%, rgba(255, 88, 107, 0.1) 59%, rgba(255, 255, 255, 1) 79%);
		}

		.topMess {
			display: flex;
			padding: 30rpx 32rpx 44rpx;
			position: relative;

			.headPhoto {
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
				overflow: hidden;
				margin: 0 30rpx 0 0;
			}

			.messBox {
				.phone {
					line-height: 48rpx;
					font-size: 36rpx;
					padding: 6rpx 0 4rpx;
				}

				.status {
					color: $uni-color-primary;
					border-radius: 46rpx;
					display: inline-block;
					padding: 0 24rpx;
					font-size: 24rpx;
					line-height: 44rpx;
					background: rgba(255, 255, 255, 0.5);

					&.active {
						&::before {
							content: '';
							display: inline-block;
							width: 24rpx;
							height: 24rpx;
							background: url('#{$imgUrl}/personal/rz.png') no-repeat;
							background-size: 100% 100%;
							vertical-align: middle;
							margin: -4rpx 6rpx 0 0;
						}
					}
				}
			}

			.role {
				background: $uni-color-primary;
				color: #fff;
				height: 54rpx;
				line-height: 54rpx;
				position: absolute;
				top: 60rpx;
				/* #ifdef MP-WEIXIN */
				top: 80rpx;
				/* #endif */
				right: 0;
				font-size: 24rpx;
				border-radius: 28rpx 0px 0px 28rpx;
				padding: 0 18rpx 0 28rpx;
			}
		}

		.personalBox {
			width: 686rpx;
			margin: 0 auto;
			background: url('#{$imgUrl}/personal/integralBg.png') no-repeat, #fff;
			background-size: 100% 194rpx;
			border-radius: 24rpx 24rpx 16rpx 16rpx;
			box-shadow: 0 10rpx 30rpx rgb(245, 241, 233, 0.5);
			padding: 22rpx 0;
      background: #fff;

			.personalTop {
				padding: 0 28rpx;
        display: none;
				.lev {
					font-weight: 800;
					color: #FFDFB0;
					font-size: 40rpx;
				}

				.num {
					font-size: 26rpx;
					color: rgba(255, 235, 214, 0.6);

					.txt {
						font-size: 28rpx;
						font-weight: 700;
						color: #FFDFB0;
					}
				}
			}

			.personalContent {
				text-align: center;
				margin-top: 28rpx;
        display: none;
				.nav {
					color: #fff;

					.icon {
						width: 48rpx;
						height: 48rpx;
						background: url('#{$imgUrl}/personal/integral01.png') no-repeat center;
						background-size: 26rpx 26rpx;
						background-color: rgba(255, 227, 177, 0.3);
						border-radius: 50%;
						display: inline-block;
						vertical-align: middle;
						margin-right: 12rpx;

						&.icon02 {
							background: url('#{$imgUrl}/personal/integral02.png') no-repeat center;
							background-size: 26rpx 26rpx;
							background-color: rgba(255, 227, 177, 0.3);
						}
					}
				}
			}
		}

		.navBox {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 20rpx;

			.nav {
				flex: 1;
				text-align: center;

				.pic {
					width: 64rpx;
					height: 64rpx;
					margin: 0 0 12rpx;
					display: inline-block;
				}

				.title {
					line-height: 32rpx;
				}
			}
		}

		.roomSetNav {
			.setTitle {
				font-size: 32rpx;
				padding: 0 32rpx;

				&::before {
					content: '';
					display: inline-block;
					width: 8rpx;
					height: 28rpx;
					background: $uni-color-primary;
					border-radius: 228rpx;
					vertical-align: middle;
					margin-top: -6rpx;
					margin-right: 16rpx;
				}
			}

			.setNav {
				padding: 28rpx 32rpx 40rpx;

				.nav {
					flex: 0 0 156rpx;
					height: 160rpx;
					margin-right: 20rpx;
					position: relative;

					.title {
						position: absolute;
						top: 32rpx;
						left: 32rpx;
						line-height: 38rpx;
						font-size: 30rpx;

						.tit {
							display: block;
							font-weight: 700;
						}
					}
				}
			}
		}

		.navListBox {
			border-radius: 16px;
			background: #FFFFFF;
			box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.03);
			flex-wrap: wrap;
			width: 686rpx;
			margin: 0 auto;
			padding: 48rpx 0 0;

			.navItem {
				flex: 0 0 25%;
				text-align: center;
				margin: 0 0 48rpx;

				.img {
					width: 44rpx;
					height: 44rpx;
				}

				.txt {
					line-height: 32rpx;
				}
			}
		}

		.serviceBox {
			text-align: center;
			padding: 30rpx 0;

			.phone {
				color: #666;
				line-height: 32rpx;
			}
		}
	}
.check-popup{
	::v-deep.uni-popup__error{
		color: rgba(102, 100, 100, 1);
	}
	::v-deep.uni-button-color{
		color: rgba(253, 150, 24, 1);
	}
	&.approve-popup{
		::v-deep.uni-dialog-title{
			display: none;
		}
		::v-deep.uni-dialog-content{
			padding-top: 50rpx;
		}
	}
}
</style>
